<template>
    <div class="top-nav">
      <div class="top-nav-left">
        <el-menu :default-active="activeIndex"
          mode="horizontal" 
          text-color="#fff" 
          background-color="#1e9fff"
          active-text-color="#fff"
          @select="handSelect"
          :ellipsis="false">
            <el-menu-item index="1">
                首页
            </el-menu-item>
            <el-menu-item index="2">
                应用
            </el-menu-item>
            <el-menu-item index="3">
                监控
            </el-menu-item>
            <el-menu-item index="4">
                关于
            </el-menu-item>
        </el-menu>
      </div>
      <div class="top-nav-right">
        <el-menu mode="horizontal"
          text-color="#fff"
          background-color="#1e9fff"
          active-text-color="#fff">
          <el-menu-item
            index="5">
            <span>用户</span>
          </el-menu-item>
          <el-menu-item
            index="6">
            <span>用户2</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import store from '~/store'

export default defineComponent({
  data() {
    console.log("data2", this);
    return {
      activeIndex: "1",
    }
  },
  methods: {
    handSelect(key: string, keyPath: string[]) {
      if(key == "4") {
        this.$router.push("/About");
      } else if(key == "1") {
        this.$router.push("/Home")
      } else if(key == "2") {
        this.$router.push("/Application");
      } else if(key == "3") {
        this.$router.push("/Monitor");
      }

      const {my2, nav2, count, count2} = store();
      console.log(my2);
      my2.test();

      console.log(nav2);

      console.log("count2 = " + count2);
      console.log("count = " + count);

      //store.nav.increment();

      console.log(key, keyPath);
      this.activeIndex = key;
      

     }
  }
})

</script>
<style scoped>
.top-nav {
  background: #1e9fff;
  position: fixed;
  top: 0;
  left: 0;
  height:42px;
  width: 100%;
  display: flex;
  justify-content: space-between; 
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 0px;
  color: rgb(0, 0, 0) !important;
}

.el-menu--horizontal>.el-menu-item {
  border-bottom: 0px;
}
.el-menu--horizontal {
  border: none;
  height: 42px;
}
</style>